<template>
  <div style="width: 100%;height: 90px;">
    <img src="../img/音乐-2.jpg" style="width: 350px;height: 350px;position: absolute;left: 30px;top: -110px">
    <el-input
        placeholder="请输入内容"
        v-model="input4" style="width: 250px;position: absolute;left: 36%;top: 30px">
      <i slot="prefix" class="el-input__icon el-icon-search"></i>
    </el-input>
<!--    <el-card class="box-card" style="width: 100px;position: relative;top: 10px">-->
<!--      <div v-for="(MusicList,musicindex) of songlist" :key="musicindex" class="text item">-->
<!--        {{MusicList.input4}}-->
<!--      </div>-->
<!--    </el-card>-->

    <el-button  style="position: absolute;left: 55%;top: 30px;" @click="search">搜索</el-button>
    <el-col>
      <div class="demo-basic--circle" style="position: absolute;left: 75%;top: 20px">
        <div class="block">
          <el-avatar :size="50">
            <el-image  :src="$axios.defaults.baseURL + userInfo.img" class="avatar" style="height: 100%;" />
          </el-avatar>
        </div>
      </div>
      <h3 style="position: absolute;left: 79%;top: 10px">欢迎{{ userInfo.name }}！</h3>
    </el-col>
    <div style="position: absolute;left: 90%;top: 30px" v-if="!showname">
      <span   @click="$router.push('/login')">登录</span>
    </div>
    <span style="position: absolute;left: 90%;top: 30px"  @click="$router.push('/login')">退出登录</span>
  </div>
</template>

<script>

// // 节流函数
// const delay = (function (){
//     let timer = 0;
//     return function (callback,ms){
//       clearTimeout(timer);
//       timer = setTimeout(callback,ms);
//     };
// })();
export default {
  name: "myheader",
  data() {
    return {
      input4: '',
      userInfo: {},
      showname:false,
      songlist:[]
    }
  },
  created() {
    this.$axios.get("/api/user/mine/info", {headers: {TOKEN: this.token}}).then(res => {
      this.userInfo = res.data.data;
      if (this.userInfo){
        this.showname = true;
      }else {
        this.showname = false
      }
    });
  },
  methods: {
    search(){
      console.log(this.input4)
      this.$axios.get("/api/adminup/searchMusic",{
        params:{
          songname:this.input4
        }
      }).then(res =>{
        this.songlist = res.data.data
        console.log(res)
      })
    }
  },
  // watch:{
  //   input4(){
  //     delay(()=>{
  //       this.songlist();
  //     },300);
  //   }
// }

}
</script>

<style scoped>
</style>